<template>
	<view class="app-line main-between cross-center">
		<text class="app-text box-grow-0">地区</text>
		<view class="box-grow-1 area-left"><app-area-picker @customevent="areaEvent"></app-area-picker></view>
	</view>
</template>

<script>
import appAreaPicker from '../../../components/page-component/app-area-picker/app-area-picker.vue';
export default {
	components: {
		appAreaPicker
	},
	data() {
		return {
			value:''
		};
	},
	methods: {
		areaEvent(data) {
			if (data) {
				this.value = data.province.name + ',' + data.city.name + ',' + data.district.name;
				//console.log(this.value);
				this.$emit('areaEvent',this.value)
			}
		}
	}
};
</script>

<style lang="scss" scoped>

.area-left {
	padding-left: #{32rpx};
	text-align: right;
	margin-left: auto;
}
.app-line {
	background-color: #f6f6f6;
	height: #{88rpx};
	line-height: #{99rpx};
	margin: #{13px 24upx};
	padding:0 13px;
	text.app-text {
		font-size: #{28rpx};
		color: #c9c9c9;
		width: #{124rpx};
	}
}

.app-border {
	border-bottom: #{1rpx} solid $uni-weak-color-one;
}

.c-address {
	padding-right: #{24rpx};
	font-size: #{28rpx};
	color: #c9c9c9;
}

.icon-arrow-image {
	width: #{12rpx};
	height: #{24rpx};
	background-image: url('../../../static/image/icon/arrow-right.png');
	background-size: 100% auto;
	background-repeat: no-repeat;
}

.tip {
	padding: #{0 24rpx 24rpx 24rpx};
	background: #ffffff;
	color: #b7b7b7;
}
</style>
